<template>
  <div class="common-layout">
    <el-container>
      <!-- 头部· -->
      <el-header>
        <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">

          <el-menu-item index="1" style="font-size: 20px">首页</el-menu-item>
          <el-sub-menu index="2">
            <template #title>App下载</template>
            <el-menu-item index="2-1">APK链接下载</el-menu-item>
            <el-menu-item index="2-2">APK二维码下载</el-menu-item>
            <el-menu-item index="2-3">网页下载</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>
      <!-- 下部 -->
      <el-main>
        <div class="topImg">
          <!-- <div class="topContent">在数据洪流日益汹涌的今天</div>
          <div class="topContent2">每一个决策都关乎成败</div> -->
          <div class="accent">APP智能识别分析系统
          </div>
          <div class="title">
            快速分析，性能出色，操作简单的app分析系统
          </div>
        </div>
        <div class="advan">
          <el-card style="width: 250px;height: 150px">
            <SvgIcon
              iconName="icon-baolipojie"
              style="margin-right: 5px"
              color="white"
            ></SvgIcon>
            <span style="margin-top: 10px;font-size: 15px">高效的破解算法</span>
            <span style="margin-top: 5px;color:gray;font-size: 12px">确保破解的兼容性和稳定性</span>
          </el-card>
          <el-card style="width: 250px;height: 150px">
            <SvgIcon
              iconName="icon-gongju-"
              style="margin-right: 5px"
              color="white"
            ></SvgIcon>
            <span style="margin-top: 10px;font-size: 15px">丰富的功能集合</span>
            <span style="margin-top: 5px;color:gray;font-size: 12px">满足用户在不同场景下的需求</span>
          </el-card>
          <el-card style="width: 250px;height: 150px">
            <SvgIcon
              iconName="icon-anquan1"
              style="margin-right: 5px"
              color="white"
            ></SvgIcon>
            <span style="margin-top: 10px;font-size: 15px">完善的防护机制</span>
            <span style="margin-top: 5px;color:gray;font-size: 12px">内置多重安全防护机制</span>
          </el-card>
          <el-card style="width: 250px;height: 150px">
            <SvgIcon
              iconName="icon-a-lianhe79"
              style="margin-right: 5px"
              color="white"
            ></SvgIcon>
            <span style="margin-top: 10px;font-size: 15px">完善的自动化机制</span>
            <span style="margin-top: 5px;color:gray;font-size: 12px">普通民众也能轻松分析违法APK</span>
          </el-card>
        </div>
        <div class="upTitle">请选择文件进行上传分析</div>
        <div class="start">
          <el-upload
          class="upload-demo"
          drag
          :http-request="uploadFile"
          :before-upload="beforeUpload"
          :on-progress="handleUploadProgress"
          multiple
        >
          <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
          <div class="el-upload__text">
            拖拽上传或 <em>点击上传</em>
          </div>
        </el-upload>
        <div class="demo-progress">
          <el-progress
            v-if="uploading"
            :percentage="percentage"
            :stroke-width="15"
            striped
          />
        </div>
        </div>
        <div v-if="false" >
          <el-table border :data="uploadedFiles">
          <el-table-column prop="filename" label="文件名"></el-table-column>
          <el-table-column prop="filepath" label="文件路径"></el-table-column>
          <el-table-column label="选中">
            <template #default="scope">
              <el-radio v-model="selectedFile" :label="scope.row.filepath"
                >Select</el-radio
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="ana-btn">
          <el-button
            type="primary"
            @click="analyzeFile"
            :disabled="!selectedFile || analyzing"
            >分析</el-button
          >
        </div>
        </div>

       <div class="mycard" >
        <div class="svg">
          <!-- <SvgIcon
              iconName="icon-xitongguanli"
              style="margin-right: 5px;width: 170px;height: 140px"
              color="white"
            ></SvgIcon> -->
        </div>

            <div class="des">
              <span class="about">关于我们</span>
              <div class="detail">
                <span>随着社会治安的逐步改善，网络空间的复杂性却日益凸显。</span>

                <span>尤其是网上的诈骗和赌博活动借助手机APP这一载体，变得更加隐蔽且多样化。</span>

               <span>严重侵害了公众的财产安全和社会的稳定秩序。</span>

                <span>普通民众难以自行分析其中的违法线索，这使得打击网络犯罪变得更加困难。</span>

                <span>自动化APK违法线索分析平台应运而生。</span>
              </div>
            </div>
          </div>
      </el-main>
    </el-container>
  </div>
</template>
<script setup>
import { UploadFilled } from "@element-plus/icons-vue";
import { ref } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { useStateStore } from "@/stores/counter.js";

const stateStore = useStateStore();

const percentage = ref(0);
const uploading = ref(false);
const analyzing = ref(false);
const uploadedFiles = ref([]);
const selectedFile = ref(null);
const router = useRouter();

const handleUploadProgress = (event) => {
  if (event.lengthComputable) {
    percentage.value = Math.round((event.loaded * 100) / event.total);
  }
};

const uploadFile = (options) => {
  const { file, onSuccess, onError, onProgress } = options;
  uploading.value = true;
  const formData = new FormData();
  formData.append("file", file);

  axios
    .post("http://localhost:5000/upload", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
      onUploadProgress: (progressEvent) => {
        handleUploadProgress(progressEvent);
        onProgress(progressEvent);
      },
    })
    .then((response) => {
      // console.log(response.data);
      uploadedFiles.value.push({
        filename: file.name,
        filepath: response.data.filepath,
      });
      onSuccess(response.data);
      uploading.value = false;
    })
    .catch((error) => {
      console.error(error);
      onError(error);
      uploading.value = false;
    });
};

const beforeUpload = (file) => {
  return true;
};

const analyzeFile = () => {
  analyzing.value = true;
  router.push({ name: "analysis", query: { filepath: selectedFile.value } });
};
</script>
<style scoped lang="less">
.des{
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
}
.des div{
  color: #999;
  font-size: 15px;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
}
.des div span{
  margin-top: 5px;
}
.about{
  display: block;
  color: #232F55;
  font-size: 20px;
  font-weight: bold;
}
.mycard{
  width: 100%;
  background-color: #f5f9fc;
  margin-top: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  .svg{
    display: flex;
    justify-content: center;
  }
  .des{
    margin-top:20px;
    .about{
      margin-bottom: 10px;
    }
    .detail{
      margin-bottom: 20px;
    }
  }
}
.start{
  display: flex;
  justify-content:  center;
  margin-top: 10px;
  margin-bottom: 30px;
}
::v-deep .el-card__body{
  padding-top: 36px;
  display: flex;
  flex-direction:column;
  align-items:center;
}
.svg-icon{
  width: 40px;
  height: 40px;
}
.el-card{
  display: flex;
  justify-content: center;
}
.advan{
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}
.topContent{
  position: absolute;
  right: 255px;
  top:80px;
  font-size: 29px;
  color: white;
}
.topContent2{
  position: absolute;
  right: 250px;
  top:130px;
  font-size: 29px;
  color: white;
}
.el-main{
  padding: 0;
}
.topImg{
  width: 100%;
  height: 280px;
  .accent{
      background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 58px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      margin-top:200px;
      font-weight: 900;
    }
    .title {
      display: inline-block;
      line-height: 40px;
      height: 40px;
      font-size: 20px;
      color:gray;
      margin-right: 50px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
}
.upTitle{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color:gray;
  margin-top:50px;
  margin-bottom:20px
}
::v-deep .el-upload-list {
  display: none;
}
.el-icon--upload {
  color: #0488dc;
}
::v-deep .el-sub-menu__title {
  font-size: 20px;
}
.ana-btn {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.el-button {
  width: 90px;
  height: 40px;
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
}
.el-table {
  width: 100%;
  margin-top: 30px;
  --el-table-border-color: #d9dde7;
}

.el-icon--upload {
  margin-top: 85px;
}
::v-deep .el-upload-dragger {
  width: 520px;
  height: 400px;
  border: 5px dashed var(--el-border-color);
}
.el-upload-dragger .el-upload__text {
  font-size: 18px;
}

.el-header {
  padding: 0;
  justify-content: center;
  width: 100%;
  position: fixed;
  z-index:999;
}

.el-menu--horizontal {
  justify-content: flex-end;
}
.el-sub-menu__title {
  font-size: 20px;
}
.el-menu-item {
  justify-content: center;
}
.uploadContent{
  margin-bottom: 30px;
}
</style>
